<template>
    <div class="getCode">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="" left-arrow
            @click-left="$router.go(-1)" />
        <div class="code-info">
            <h2>输入验证码</h2>
            <p class="phone-code">验证码已发送到+86 13707616275</p>
            <div class="verification-code">
                <van-field v-for="(digit, index) in digits" :key="index" v-model="inputDigits[index]" type="number"
                    maxlength="1" input-align="center" class="verification-input"
                    :style="{ backgroundColor: '#363358', color: '#fff', borderRadius: '.18rem' }"
                    @input="handleInput(index)" :ref="`input_${index}`" />
            </div>
            <p class="countdown">{{ contsTime }}秒后重新获取</p>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            contsTime: 60,
            digits: [1, 2, 3, 4, 5, 6], // 验证码的位数
            inputDigits: ['', '', '', '', '', ''], // 输入的验证码数字
            mobile: ''
        }
    },
    methods: {
        ...mapMutations('user', ['updateUserInfo']),
        getCode() {
            this.$axios.get(`score/login/code?mobile=${this.mobile}`).then((res) => {
                if (res.code == 0) {
                    this.$toast.success('发送成功')
                    this.contsTime = 60
                } else {
                    this.$toast.fail(res.message);
                }
            });
        },
        handleInput(index) {
            // 当用户输入时，自动聚焦到下一个输入框
            if (index < this.digits.length - 1 && this.inputDigits[index].length > 0) {
                this.$refs[`input_${index + 1}`][0].$el.querySelector('input').focus();
            }
            let flag = 0
            this.inputDigits.forEach(item => {
                if (item) {
                    flag++
                }
            })
            if (flag == 6) {
                this.toTestVerify()
            }
        },
        toTestVerify() {
            let code = this.inputDigits.join('');
            this.$axios.post(`score/login`, {
                code,
                mobile: this.mobile
            }).then((res) => {
                if (res.code == 0) {
                    this.$toast.success('登录成功')
                    this.updateUserInfo(res.result)
                    localStorage.setItem('shop_userinfo', res.result)
                    this.$router.push({
                        path: '/scoring/makeIndex'
                    })
                } else {
                    this.$toast.fail(res.message);
                }
            });
        },
        startCountdown() {
            this.timer = setInterval(() => {
                if (this.contsTime > 0) {
                    this.contsTime--;
                } else {
                    this.getCode()
                }
            }, 1000);
        },
        stopCountdown() {
            clearInterval(this.timer);
        },
    },
    mounted() {
        this.startCountdown();
    },
    created() {
        this.mobile = this.$route.query.mobile
    },
    destroyed() {
        clearInterval(this.timer);
    },
}
</script>

<style lang="less" scoped>
.verification-code {
    padding: 0 .3rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.verification-input {
    width: 40px;
    margin-right: 10px;
}

.getCode {
    color: #fff;
    padding: 2rem .2rem;

    ::v-deep .van-cell {
        background: #1f1b31;
        position: inherit;
    }

    ::v-deep .van-field__control {
        color: #fff;
    }

    .code-info {
        font-size: .4rem;

        h2 {
            margin-bottom: .3rem;
            font-weight: 500;
        }

        ::v-deep .van-cell__title {
            color: #fff;
        }

        .phone-code {
            margin-bottom: 1rem;
            font-size: .35rem;
        }

        .countdown {
            font-size: .3rem;
            width: 100%;
            text-align: center;
        }
    }

}
</style>